<template>
  <div class="el_btn_data">
    <el-button-group class="data">
      <el-button size="small" v-for="(btn,index) in btns" :key="btn.id" @click="doSearch(index)" :class="active==index?'active':''">{{btn.name}}</el-button>
    </el-button-group>

    <!-- <el-button-group class="severity">
      <el-button size="small" p="severity" data-value="-1" class="all">全部</el-button>
      <el-button size="small" p="severity" data-value="0" class="other">未分类</el-button>
      <el-button size="small" p="severity" data-value="1" class="info">信息</el-button>
      <el-button size="small" p="severity" data-value="2" class="warn">警告</el-button>
      <el-button size="small" p="severity" data-value="3" class="gserious">一般严重</el-button>
      <el-button size="small" p="severity" data-value="4" class="serious">严重</el-button>
      <el-button size="small" p="severity" data-value="5" class="disaster">灾难</el-button>
    </el-button-group> -->
    <div class="btnlist" style="margin-bottom:3px;width:100%;">
      <div style="height: 1px;clear:both;" ></div>
    </div>
    <div style="width:100%;">
       <table class="datatable">
         <caption style="font-size:18px;color:#322d35;padding-bottom:30px;text-align: left;"><span>[{{item.name}}]</span>的历史数据 (<span>{{pagination.total}}</span>条)</caption>
          <thead>
            <tr >
              <th style="width:10%;">序号</th>
              <th style="width:40%;">监控时间</th>
              <th style="width:40%;">监控值</th>
              <th style="width:10%;">
                <span style="padding:0px;">备注</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr align="center" v-for="(row,index) in pagination.rows"  v-if="pagination.total>0">
              <td style="word-break : break-all; color:#333e50">{{row.index}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.clock}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.value}}</td>
              <td style="word-break : break-all; color:#333e50"></td>
            </tr>
            <tr  v-if="!pagination.total">
              <td style="word-break : break-all; color:#333e50" colspan="4">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import topoApi from "api/topo.js";
import eventHubs from "common/eventHubs";
export default {
  name: "itemData",
  data() {
    return {
      btns:[
        {id:'data40',value:0,name:'最近40条'},
        {id:'day1',value:1,name:'今天'},
        {id:'day3',value:3,name:'3天'},
        {id:'day7',value:7,name:'7天'},
        {id:'day30',value:30,name:'30天'}
      ],
      active:0,//选中按钮索引
      oldactive:-1,
      item: {
        name: "监控项"
      },
      params:{
        timefrom: 0,
        timetill: 0,
        size: -1,
      },
      pagination: {
        rows: [],
        pageSizes: [20, 30, 50, 100, 200, 500],
        pageSize: 20,
        page: 1,
        total: 0
      }
    };
  },
  created() {
    const self = this;
    //接受item改变的事件
    eventHubs.getEventHub().$on("itemChanged", data => {
      self.item = data;
      self.doSearch(0);
    });
  },
  mounted() {
    const self = this;
    self.$nextTick(function() {
    });
  },
  methods: {
    initPagination(){
      const self = this;
      self.pagination.rows = [];
      self.pagination.page = 1;
      self.pagination.pageSize = 20;
      self.pagination.total = 0;
    },
    doSearch(index) {
      const self = this;
      self.oldactive = self.active
      self.active = index
      if(self.oldactive != index){
        self.initPagination()
      }
      self.getParams(self.btns[index].value);
      self.getData();
    },
    handleSizeChange(val) {
      const self = this;
      self.pagination.pageSize = val;
      self.doSearch(self.active);
    },
    handleCurrentChange(val) {
      const self = this;
      self.pagination.page = val;
      self.doSearch(self.active);
    },
    getData() {
      const self = this;
      //获取主机的监控项数据
      topoApi
        .itemHistory(self.item.itemid, self.params.timefrom, self.params.timetill, {
          size: self.params.size,
          page: self.pagination.page,
          pageSize: self.pagination.pageSize
        })
        .then(resp => {
          let data = resp.data;
          if (data) {
            self.pagination.rows = data.rows;
            self.pagination.page = data.page;
            self.pagination.pageSize = data.pageSize;
            self.pagination.total = data.total;
          } else {
            self.initPagination()
          }
        })
        .catch(err => {
          console.error(err);
          self.$message(err);
        });
    },
    getParams(value) {
      const self = this;
      let size = -1,
        endDate = new Date(),
        year = endDate.getFullYear(),
        month = endDate.getMonth() + 1,
        day = endDate.getDate(),
        startDate = endDate;
      if (value == 0) {
        size = 40;
      } else if (value == 1) {
        startDate = new Date(year + "/" + month + "/" + day);
      } else if (value == 3) {
        startDate = new Date(year + "/" + month + "/" + day);
        startDate.setDate(startDate.getDate() - 2);
      } else if (value == 7) {
        startDate = new Date(year + "/" + month + "/" + day);
        startDate.setDate(startDate.getDate() - 6);
      } else if (value == 30) {
        startDate = new Date(year + "/" + month + "/" + day);
        startDate.setDate(startDate.getDate() - 29);
      } else {
      }
      self.params.size = size;
      self.params.timefrom = Math.floor(startDate.getTime() / 1000);
      self.params.timetill = Math.ceil(endDate.getTime() / 1000);
    }
  }
};
</script>
<style scoped>
.el_btn_data .active {
  color: #1d90e6;
  border-color: #1d90e6;
  outline: 0;
}

.datatable {
  border-bottom: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 43px 20px 0 0;
  font-size: 12px;
  table-layout: fixed;
  line-height: 30px;
}

.datatable > thead > tr > th,
.datatable > tbody > tr > th,
.datatable > tfoot > tr > th,
.datatable > thead > tr > td,
.datatable > tbody > tr > td,
.datatable > tfoot > tr > td {
  /* border-top: 1px solid #dddddd; */
  font-size: 12px !important;
  vertical-align: middle !important;
  text-align: left;
  color: #333e50;
  padding: 0 0 0 50px;
}

.datatable > thead > tr > th {
  border-bottom: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px !important;
  vertical-align: middle;
  text-align: left;
  padding: 0 0 0 50px;
}

.datatable tr {
  height: 47px;
  line-height: 47px;
  border-bottom: 1px solid #ddd;
}
</style>
